<template>
    <div>
        <ul class="add-address-box clearfix b-g-f">
            <li class="clearfix add-address-li">
                <span class="h-h-r">收货人</span>
                <input class="address-input" v-model="parmes.name" type="text" placeholder="请填写姓名">
            </li>
            <li class="clearfix add-address-li">
                <span class="h-h-r">联系电话</span>
                <input class="address-input" v-model="parmes.tel" type="phone" placeholder="请填写联系电话">
            </li>
            <li class="clearfix add-address-li" @click="show=true">
                <span class="h-h-r">配送地址</span>
                <input class="address-input peisong" v-model="parmes.citys" style="float: right;"  type="text" placeholder="请选择省、市、区" disabled>
            </li>
            <li class="clearfix add-address-textarea">
                <textarea class="address-textarea" v-model="parmes.address" name="" id="" cols="30" rows="3" placeholder="请填写详细地址(街道、楼牌号等)"></textarea>
            </li>
        </ul>
        <van-popup v-model="show" position="bottom">
            <van-area :area-list="areaList" @confirm="confirm" @cancel="cancel" />
        </van-popup>
        <div class="add-address" @click="addAddress()">
            完成
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            parmes:{},
            show:false,
            areaList:{
                province_list: this.$province_list,
                city_list: this.$city_list,
                county_list:this.$county_list
            },   
        }
    },
    components:{},
    mounted(){
        if(this.$route.query.address){
            let address = eval('(' + this.$route.query.address + ')')
            this.parmes.addr_id = address.id
            this.parmes.name = address.name
            this.parmes.tel = address.tel
            this.parmes.citys = `${address.province}/${address.city}/${address.area}`
            this.parmes.province = address.province
            this.parmes.city = address.city
            this.parmes.area = address.area
            this.parmes.address = address.address_all
            this.$forceUpdate()
        }
    },
    methods: {
        // 添加地址
        addAddress(){
            this.$api.shopping.addAddress(this.parmes).then(resp=>{
                if(resp.code == 1){
                    Toast('添加成功')
                    // this.$router.push({
                    //     name:'address'
                    // })
                    this.$router.go(-1)
                }else{
                    Toast(resp.msg)
                }
            })
        },
        confirm(value,index){
            this.parmes.citys = `${value[0].name}/${value[1].name}/${value[2].name}`
            this.parmes.province = value[0].name
            this.parmes.city = value[1].name
            this.parmes.area = value[2].name
            this.show = !this.show
        },
        cancel(){
            this.show = !this.show
        },
        success(){
            this.$router.push({
                name:'address'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.add-address-box{
    border-top: 20px solid #f5f5f5;
    padding: 30px;
    .add-address-li{
        height: 100px;
        line-height: 100px;
        border-bottom:#f5f5f5 1px solid;
        .h-h-r{
            float: left;
            font-size: 36px;
            color: #666;
            width: 180px;
        }
        .address-input{
            margin: 0;
            padding: 0;
            border:none;
            margin-left: 60px;
            height: 98px;
            line-height: 105px;
            color: #333;
            font-size: 38px;
            overflow: hidden;
        }
        .peisong{
            text-align: right;
            background: url('../../../../static/img/you.png') no-repeat right center;
            background-size: 20px;
            padding-right:40px;
            line-height: 120px;
            min-width: 580px;
        }
    }
    .add-address-textarea{
        padding: 20px 0;
        font-size: 36px;
        width: 100%;
        display: inline-block;
        .address-textarea{
            width: 100%;
        }
    }
}
</style>

